<template>
<div>
  <nav-bar>
    <template v-slot:left>
      <img src="~assets/img/common/logo.png" alt="" class="logo" @click="gohome">
    </template>
    <template v-slot:center>
      <nav-bar-item path="/home">首页</nav-bar-item>
      <nav-bar-item path="/about" :secondItem="['关于我', '友链互换']">关于</nav-bar-item>
      <nav-bar-item path="/study" :secondItem="study">学习</nav-bar-item>
      <nav-bar-item path="/message">留言</nav-bar-item>
    </template>
    <template v-slot:right >
      <user-detail/>
      <search-input/>
    </template>
  </nav-bar>
</div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'
import NavBarItem from 'components/common/navbar/NavBarItem'
import SearchInput from 'components/common/searchinput/SearchInput'
import UserDetail from 'components/content/userdetail/UserDetail'

export default{
  name: 'MainView',
  components: {
    NavBar,
    NavBarItem,
    SearchInput,
    UserDetail
  },
  data () {
    return {
      study: ['php', 'html', 'css', 'ajax', 'javaScript']
    }
  },
  methods: {
    gohome() {
      this.$router.replace('/home')
    }
  }
}
</script>

<style scoped>
.logo{
  float: right;
  height: 50px;
  margin-right: 20px;
}
</style>
